<template>
  <div class="container">
    <div id="cmsv6flash"></div>
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-select v-model="vehicle" placeholder="请选择">
                <el-option
                  v-for="item in vehicles"
                  :key="item.nm"
                  :label="item.nm"
                  :value="item.nm"
                ></el-option>
              </el-select>
              </el-form-item>
            <el-form-item>
              <!-- <el-radio v-model="form.radioData" label="日">按日期：</el-radio> -->
              <span>查询日期：</span>
              <el-date-picker
                v-model="form.valueDay"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="searchPlayback"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <el-table-column
        prop="车辆类型"
        label="车辆类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="出动数量"
        label="出动数量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="总数量"
        label="总数量"
        align="center"
      ></el-table-column>
      <el-table-column prop="出车率" label="出车率"></el-table-column>
      <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import { initPlayerExample } from "@/common/js/Cmsv6Player.js";
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      vehicle: '',
      vehicles: [],
      form: {
        radioData: '日',
        valueDay: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        valueMonth: ''
      },
      tableData: [],
      originalData: [],
      exportExcelData: [],
      swfobject: null,
      playUrl: "ws://111.160.78.62:6611/3/5?DownType=5&jsession=&DevIDNO=078044372225&FILELOC=2&FILESVR=6&FILECHN=63&FILEBEG=21721&FILEEND=21730&PLAYIFRM=0&PLAYFILE=D:/gStorage/RECORD_FILE/078044372225/2023-12-08/02_64_6401_0_00078044372225231208060201000400.mp4&PLAYBEG=0&PLAYEND=0&PLAYCHN=0&YEAR=23&MON=12&DAY=8",
            
    }
  },
  created () {
    // if (localStorage.getItem('VIDEO_UID') === '0'){
    //     this.$message.warning('当前账号不支持视频监控')
    //     return;
    //   }
    this.axiosNew = this.$axios.create({
      baseURL: 'http://111.160.78.62:88/', //这是基础url
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      transformRequest: [function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }]
    });
    this.loginHuabao()
  },
  mounted () {
    this.swfobject = initPlayerExample()
    swfobject.startVodM(this.playUrl, '');
  },
  methods: {
    async loginHuabao () {
      const that = this;
      this.axiosNew.post('StandardApiAction_login.action', {
        // account: localStorage.getItem('VIDEO_UID'),
        // password: localStorage.getItem('VIDEO_PWD')
        account: 'admin',
        password: 'lhyh'
      })
        .then(function (response) {
          // console.log(response.data);
          // {result: 0, jsession: "86f3d85c-a196-4496-8b7e-27d50edd1783", account_name: "admin", JSESSIONID: "86f3d85c-a196-4496-8b7e-27d50edd1783"}
          // this.jsession = response.data.jsession;
          if (response.data.result == 0) {
            console.log(response.data.jsession)
            that.jsession = response.data.jsession
            that.getCarList()
            // that.searchPlayback()
          } else {
            this.$message.error('视频账号连接异常');
          }
        });
    },
    async getCarList () {
      const that = this;
      this.axiosNew.post('StandardApiAction_queryUserVehicle.action', {
        jsession: this.jsession
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.result == 0) {
            that.vehicles = response.data.vehicles
          } else {
            this.$message.error('视频车辆列表获取异常');
          }
        });
    },
    async searchPlayback () {
      console.log(this.vehicle)
      const that = this;
      this.axiosNew.post('StandardApiAction_getVideoFileInfo.action', {
        jsession: this.jsession,
        DevIDNO: this.vehicle,
        LOC: 2,
        CHN: -1,
        YEAR: '2023',
        MON: '12',
        DAY: '08',
        RECTYPE: -1,
        FILEATTR: 2,
        BEG: 0,
        END: 86399,
        ARM1: 0,
        ARM2: 0,
        RES: 2,
        STREAM: 0,
        STORE: 0,
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.result == 0) {
            that.tableData = response.data.files
          } else {
            // this.$message.error('视频车辆列表获取异常');
          }
        });
    },
    // 导出Excel
    exportExcel () {
      let excelName = '车辆出动统计表'
      const tHeader = ['车辆类型', '出动数量', '总数量', '出车率']
      const filterVal = ['车辆类型', '出动数量', '总数量', '出车率']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    //详情
    handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
</style>